<script lang="ts" setup>
	import { computed, onMounted } from 'vue';

	const props = defineProps<{ nodes : any }>()

	const content = computed(() => {
		return props.nodes.replace(/\<p\>/g, '<p style="margin-bottom:12px;text-align:justify;line-height:36px">').replace(/<video.*?src="(.*?)".*?<\/video>/g, '<div data-video-src="$1">查看视频</div>')
	})

	onMounted(() => {
		let videos = document.querySelectorAll('[data-w-e-type="video"]')
		videos.forEach(element => {
			const videoSrc = element.querySelector("div[data-video-src]").getAttribute('data-video-src')
			element.innerHTML = `<video src="${videoSrc}" controls width="100%"></video>`;
		});
	})
</script>

<template>
	<rich-text :nodes="content"></rich-text>
</template>

<style></style>